<template>
  <div>
    <!-- <div class="font-size-17 font-weight-700 padding-left-20 margin-bottom-10">合同附件</div> -->
    <div v-for="(con, conindex) in fileTypeList" :key="conindex">
      <div class="flex left-lable justify-between padding-bottom-20 align-centers">
        <span class="font-size-16 font-weight-500">{{ con.typeName }}</span>
        <el-button v-if="!isEdit" type="primary" class="margin-left-20 normal-btn" size="mini" @click="addFile(con.list)">添加</el-button>
      </div>
      <template v-if="con.list.length > 0">
        <el-form v-for="(item, index) in con.list" :key="item.guid" :ref="`${con.type}${index}`" label-width="120px" size="small" :model="item" label-position="right">
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="附件名称" prop="fileTitle" :rules="[{ required: !isEdit, message: '请输入附件名称', trigger: 'blur' }]">
                <el-input :readonly="isEdit ? true : false" v-model="item.fileTitle"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="16">
              <el-form-item label="附件上传" prop="fileUrl" :rules="[{ required: !isEdit, message: '请上传附件', trigger: 'change' }]">
                <uploadFile v-if="!isEdit" buttonType="text" isShowList="" :is-multiple="false" :limit="10" filed-name="file" :max-size="70" accept-file-type=".xlsx,.xls,.csv,.png,.jpg,.Png,.Jpg,.docx,.pdf,.zip" @handleSuccess="handleSuccess($event, index, con.list)">
                  <template v-slot:info>
                    <div slot="tip" class="margin-left-10 flex align-center">
                      <el-link type="primary" v-if="item.fileUrl" @click="uploadLoad(item.fileUrl)">{{ item.fileDesc }}</el-link>
                      <i class="el-icon-delete el-icon--right color-409EFF" @click.stop="deleteFile(con.list, index)"></i>
                    </div>
                  </template>
                </uploadFile>
                <el-link type="primary" v-if="item.fileUrl && isEdit" @click="uploadLoad(item.fileUrl)">{{ item.fileDesc }}</el-link>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <!-- <el-empty v-else description="暂无信息"></el-empty> -->
    </div>
  </div>
</template>
<script>
  import uploadFile from '../../projectInfo/modules/upload.vue';
  import { guid } from '@/common/js/utils';

  // $route.query.isAgreement
  export default {
    props: {
      contractType: {
        type: String,
        default: '',
      },
      contractInfo: {
        type: Object,
        default: () => {
          return {};
        },
      },
    },

    watch: {
      contractInfo: {
        immediate: true,
        deep: true,
        handler(obj) {
          let newObj = JSON.parse(JSON.stringify(obj));
          if (newObj.projectKey) {
            this.initFileConfig(newObj);
            !this.$route.query.isAgreement && this.initFileInfo(newObj);
            this.isEdit = !newObj.contractStatus || this.$route.query.isAgreement || this.$route.query.isBack ? false : true;
          }
        },
      },
    },

    data() {
      return {
        fileTypeList: [
          {
            list: [],
            typeName: '主合同',
            type: 'masterContractAttachmentList',
          },
          {
            list: [],
            typeName: '合同附件',
            type: 'contractAttachmentList',
          },
          {
            list: [],
            typeName: '审批支持文件',
            type: 'approvalSupportAttachmentList',
          },
        ],
        validateArr: [],
        isEdit: false,
      };
    },
    mounted() {},

    methods: {
      initFileConfig(obj) {
        if (this.$route.query.isAgreement || obj.classification == 'supplement') {
          this.fileTypeList[0].typeName = '补充协议';
          this.fileTypeList[0].type = 'supplementAttachmentList';
        }
        if (this.$route.query.isBack || obj.classification == "returnRent") {
          this.fileTypeList[0].typeName = '终止协议';
          this.fileTypeList[0].type = 'returnRentAttachmentList';
        }
      },
      //详情
      initFileInfo(obj) {
        this.fileTypeList.forEach(item => {
          item.list = obj[item.type] || [];
        });
      },
      //添加
      addFile(list) {
        list.push({
          fileTitle: '',
          fileUrl: '',
          guid: guid(),
        });
      },
      //删除
      deleteFile(list, index) {
        list.splice(index, 1);
      },
      //上传成功
      handleSuccess(file, index, list) {
        let num = file.data.rows[0].originalName.lastIndexOf('_');
        let len = file.data.rows[0].originalName.length;
        let cutFileName = file.data.rows[0].originalName.substring(num + 1, len);
        if (file.data.rows && file.data.rows.length > 0) {
          list[index].fileUrl = file.data.rows[0].url;
          list[index].fileId = file.data.rows[0].key;
          list[index].fileDesc = cutFileName;
          this.validateFn();
        } else {
          this.$message.error(file.data.message);
        }
      },
      //下载
      uploadLoad(url) {
        let a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
      },
      //校验
      validateFn() {
        this.validateArr = [];
        for (let i in this.$refs) {
          if (this.$refs[i] && this.$refs[i].length > 0) {
            this.$refs[i][0].validate(valid => {
              if (!valid) {
                this.validateArr.push(1);
              }
            });
          }
        }
      },
      saveFn() {
        this.validateFn();
        if (this.validateArr.length > 0) {
          return false;
        } else {
          let result = {}
          this.fileTypeList.forEach((item,index) => {
            result[item.type] = item.list
          })
          return result;
        }
      },
    },

    components: { uploadFile },
  };
</script>
<style lang="scss" scoped>
  ::v-deep .el-form .el-form-item__label {
    padding-left: 0;
  }
</style>
